2 files changed, 86 insertions, 0 deletions
diff --git a/src/app/anime/[id]/[animeId]/page.jsx b/src/app/anime/[id]/[animeId]/page.jsx
new file mode 100644
index 0000000..d59b0a0
--- /dev/null
+++ b/src/app/anime/[id]/[animeId]/page.jsx
@@ -0,0 +1,56 @@
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
+import "./video.css";
+import { redirect } from "next/navigation";
+
+export default async function Video({ params }) {
+	const id = params.animeId;
+
+	// Getting the episode number and the anime name. Kindly ignore!
+	const words = id.split("-");
+	const last_two = words.slice(-2).join(" ");
+	const remainingWords = words.slice(0, -2).join(" ");
+
+	const data = await getVideoLink(id);
+
+	if (data.message) {
+		redirect("/404");
+	}
+
+	const link = data.sources[4].url;
+
+	return (
+		<div>
+			<div className="video2">
+				<p>
+					{last_two} - {remainingWords}
+				</p>
+				<MediaPlayer
+					title={words}
+					src={link}
+					className="testPlayer"
+					playsInline
+					aspectRatio="16/9"
+					load="eager"
+				>
+					<MediaProvider />
+					<PlyrLayout icons={plyrLayoutIcons} />
+				</MediaPlayer>
+			</div>
+		</div>
+	);
+}
+
+async function getVideoLink(id) {
+	const res = await fetch(
+		"https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id,
+		{ next: { revalidate: 3600 } } // Video links are revalidated after an hour
+	);
+	const data = res.json();
+	return data;
+}
diff --git a/src/app/anime/[id]/[animeId]/video.css b/src/app/anime/[id]/[animeId]/video.css
new file mode 100644
index 0000000..5ccb58f
--- /dev/null
+++ b/src/app/anime/[id]/[animeId]/video.css
@@ -0,0 +1,30 @@
+.video2 {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 0px auto;
+	width: 50%;
+}
+
+.testPlayer {
+	border-radius: 10px;
+}
+
+.video2 p {
+	color: white;
+	font-family: "Lato";
+	font-size: 20px;
+	text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+	.video2 p {
+		color: black;
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.video2 {
+		width: 100%;
+	}
+}
+\ No newline at end of file